//document.getElementById()
//document.querySelector()
//document.querySelectorAll() =>List
//三种方法

//DOM 元素选择
const ball = document.querySelector('#ball')
const btnStart = document.querySelector('#btnStart')
const btnStop = document.querySelector('#btnStop')

//修改小球颜色为蓝
ball.style.backgroundColor = 'blue'

//增加按钮监听事件
btnStart.addEventListener('click',start)
btnStop.addEventListener('click',stop)

//动画参数
//小球的坐标位置
let x = 0,y = 0
//小球在 x 轴和 y 轴上的移动速度（每次移动的像素数）
let dx = 1 ,dy = 1
//计时器
let timer

class Ball{
    constructor(dx,dy){
        this.dx = dx
        this.dy = dy
        
    }
}



function onBtnClicked(){

    //边界检测
    if(x>480||x<0) dx=-dx
    if(y>380||y<0) dy=-dy

    //位置更新
    x+=dx
    y+=dy

    ball.style.left = x + 'px'
    ball.style.top = y + 'px'

}

//使用 setInterval 每 1 毫秒调用一次 onBtnClicked() 函数，驱动动画循环。
function start(){
    timer = setInterval(onBtnClicked,1)
}

//使用 clearInterval 停止定时器，终止动画。
function stop(){
    clearInterval(timer)
}

